import React, { useMemo } from 'react'
import "./Home.less"
import Sub from "@/assets/images/home/subject.png"
import LinearProgress, { linearProgressClasses } from '@mui/material/LinearProgress';
//自定义进度条样式
import Button, { ButtonProps } from '@mui/material/Button';
import { styled } from '@mui/material/styles';
import { useNavigate } from 'react-router-dom';
const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
    height: 5,
    borderRadius: 5,
    [`&.${linearProgressClasses.colorPrimary}`]: {
        backgroundColor: "#eee",
    },
    [`& .${linearProgressClasses.bar}`]: {
        borderRadius: 5,
        backgroundColor: "#2e57ff",
    },
}));
//自定义进度条样式end
//自定义按钮

const ColorButton = styled(Button)<ButtonProps>(({ theme }) => ({
    color: "#fff",
    backgroundColor: "#2e57ff",
    '&:hover': {
        backgroundColor: "#2e57ff",
    },
}));
interface Iprops {
    data: IExam
}
//自定义按钮end  
export default function HomeItem(props: Iprops) {
    let nav = useNavigate()
    let { title, itemCount, actionCode } = props.data
    const rand = (m: number, n: number) => {
        return Math.ceil(Math.random() * (n - m + 1) + (m - 1))
    }
    let sui = useMemo(() => {
        return rand(0, itemCount)
    }, [itemCount])
    return (
        <div className='homeitem'>
            <div className='left'>
                <img src={Sub} alt="" />
            </div>
            <div className='center'>
                <div className='top'>{title}</div>
                <div className='center'>100/{itemCount}</div>
                <div className='bottom'>
                    <BorderLinearProgress variant="determinate" value={(sui / itemCount) * 100}  />
                </div>
            </div>
            <div className='right'>
                <ColorButton variant="contained" onClick={() => {
                    nav("/practice/" + actionCode)
                }}>练习</ColorButton>
            </div>
        </div>
    )
}
